<template>
    <!-- 地图点信息 -->
    <div class="allMarker">
        <AllinMarker :select-arr="selectArr" :select-menu-arr="selectMenu"></AllinMarker>
    </div>
</template>

<script>
    import AllinMarker from "../../../components/allinMarker/AllinMarker";
    let Hls = require('hls.js');
    let Flv = require('flv.js');
    import DPlayer from 'dplayer';
    import {
        userInfo,
        queryByDeviceId
    } from '../../../axios/intellect/intellect'


    export default {
        name: "allMarker",
        components: {
            AllinMarker
        },
        data() {
            return {
                selectArr: [
                    {
                        id: 1,
                        name: '监控',
                        parentId: '4200',
                        imgUrl: require('../../../assets/intellect/icon-a.png')
                    }, {
                        id: 2,
                        name: '巡检人员',
                        parentId: '4300',
                        imgUrl: require('../../../assets/intellect/icon-b.png')
                    },
                ],
                selectMenu: [
                    {
                        id: 1,
                        name: '全部点位',
                    },
                    {
                        id: 2,
                        name: '监控',
                        parentId: '4200',
                        imgUrl: require('../../../assets/intellect/icon-a.png')
                    }, {
                        id: 3,
                        name: '巡检人员',
                        parentId: '4300',
                        imgUrl: require('../../../assets/intellect/icon-b.png')
                    },
                ],// 选择菜单数组
                map: null,// 地图实例对象
                markerArrList: [],// 点位数组
                markerDataArr: null,//全部数据
                friedArr: null,// 出入闸机点位
                screen: [],// 智能屏幕点位
                irrigation: [],//灌溉点位
                broadcast: [],//广播点位
                infoWindowOpen: null,
                markerArr : [],
                playerOptions: {
                    height: '260',
                    language: 'en',
                    playbackRates: [0.5, 1.0, 1.5, 2.0],
                    autoplay : true,
                    sources: [{
                        type: "application/x-mpegURL",
                        withCredentials: false,
                        src: "http://192.168.7.251:18000/hls/13063700002000004021_0629005019/13063700002000004021_0629005019_live.m3u8"
                    }],
                    techOrder: ['html5'],
                    flash: { hls: { withCredentials: false }},
                    html5: { hls: { withCredentials: false }},
                    autoplay: false,
                    controls: true,
                    poster: "../../assets/images/video2.jpg",
                    notSupportedMessage: '不支持的视频格式'
                }
            }
        },
        mounted() {
          
        },
        methods: {
            /**
             * 默认设置所有的点位
             */
            setAllMarker(params, map) {
                this.map = map
                // console.log('默认设置所有点位')
                this.markerDataArr = params
                // console.log(this.markerDataArr)
                let markerArr = []
                this.markerDataArr.forEach(item => {
                    item.forEach(items => {
                        // console.log(items.name)
                        if (items.names === "巡检人员") {
                            items.imgurl = this.selectArr[1].imgUrl
                            this.friedArr = item// 闸机点位
                        } else if (items.names === "监控") {
                            items.imgurl = this.selectArr[0].imgUrl
                            this.screen = item// 智能屏幕点位
                        }
                        markerArr.push(items)
                    })
                })
                this.markerArr = markerArr
                this.setMarkerToMap(markerArr)
                const _this = this
                map.on('click', function () {
                    // console.log(_this.infoWindowOpen)
                    if (_this.infoWindowOpen) {
                        _this.infoWindowOpen.close()
                    }
                })
            },
            /*
            * 点位选择
            * */
            selectMarkerItem(data) {
                if (this.markerArrList.length !== 0) {
                    this.map.remove(this.markerArrList)
                }
                if (data.name === "全部点位") {
                    let markerArr = []
                    this.markerDataArr.forEach(item => {
                        item.forEach(items => {
                            // console.log(items.name)
                            if (items.names === "巡检人员") {
                                items.imgurl = this.selectArr[1].imgUrl
                                this.friedArr = item// 闸机点位
                            } else if (items.names === "监控") {
                                items.imgurl = this.selectArr[0].imgUrl
                                this.screen = item// 智能屏幕点位
                            }
                            markerArr.push(items)
                        })
                    })
                    this.setMarkerToMap(markerArr)
                } else if (data.name === "巡检人员") {
                    this.setMarkerToMap(this.friedArr)
                } else if (data.name === "监控") {
                    this.setMarkerToMap(this.screen)
                }
            },
            /**
             * 手动选择全部点位
             */
            setMarkerToMap(data) {
                // console.log(data, '处理后的数据')
                const _this = this

                data.forEach((item,index) => {
                    const marker = new AMap.LabelMarker({
                        position: new AMap.LngLat(Number(item.longitude), Number(item.latitude)),
                        icon: {
                            image: item.imgurl,
                            size: [30, 30],
                        },
                        text: {
                            content: item.name,
                            direction: 'bottom',
                            style: {
                                fontSize: 15,
                                fillColor: '#fff',
                                padding: [3, 10],
                                backgroundColor: 'rgba(0, 22, 52, 0.49)',
                            }
                        }
                    });
                    _this.map.add(marker);
                    _this.markerArrList.push(marker)
                    marker.on('click', function () {
                        // console.log(item)
                        if (item.names === "监控") {

                            let itemName = item.name;
                            if(itemName.length >= 8) {
                                itemName = item.name.slice(0,8) + '...'
                            } else {
                                itemName = item.name
                            }
                            let itemTypeName = item.typeName;
                            if(itemTypeName.length >= 3) {
                                itemTypeName = item.typeName.slice(0,3) + '...'
                            } else {
                                itemTypeName = item.typeName
                            }
                            queryByDeviceId({deviceId: item.deviceId}).then(res => {
                                console.log(res)
                                // console.log(res, 'asdasdsadasd')

                                item.dayNumber = res.data.todayNumber // 日识别量
                                item.monthNumber = res.data.count // 月识别量


                                let videoUrl = item.publicHtml ? item.publicHtml : ''

                                let html =
                                    '<div class="markerWindow">' +
                                    '<div class="title">' +
                                    '<img src="' + item.imgurl + '" alt="">' +
                                    '<p><p style="display: inline-block" title="'+item.name+'">' + itemName + '</p><p style="display: inline-block;margin-left: 20px;" title="'+item.typeName+'">(' + itemTypeName + ')</p></p>' +
                                    "<span onclick='clearWindowInfo()'>X</span>" +
                                    '</div>' +
                                    '<div class="content">' +
                                    '<div class="table">' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.dayNumber + '</span>次</p>' +
                                    '<p>今日监控警告次数</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.monthNumber + '</span>次</p>' +
                                    '<p>监控总警告次数</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '</div>' +
                                    '<div class="videoItem">' +
                                    // '<iframe  style="width: 100%" src="' + 'http://192.168.7.251:18000/hls/13063700002000004021_0629005019/13063700002000004021_0629005019_live.m3u8' + '" frameborder="0"></iframe>' +
                                    // '<video id="my-video'+ index + '" class="video-js vjs-default-skin" controls preload="auto" poster="'+ item.imgurl + '"><source src="http://192.168.7.251:18000/hls/13063700002000004021_0629005019/13063700002000004021_0629005019_live.m3u8" type="application/x-mpegURL"></video>' +
                                    // `<video-player ref="myvideo" class="vjs-custom-skin" :options="playerOptions"></video-player>` +
                                    '<div id="dplayer'+ index +'"></div>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>';
                                _this.openWindow(item, marker, html)
                                    const dp = new DPlayer({
                                        container: document.getElementById('dplayer'+index),
                                        live: true,
                                        screenshot: true,
                                        preload:'auto',
                                        autoplay : true,
                                        mutex : false,
                                        video: {
                                            url: item.privateM3u8Url,
                                            pic: item.imgurl,
                                            thumbnails: item.imgurl,
                                            type: 'customFlv',
                                            contextmenu:[],
                                            customType: {
                                                customHls: function (video, player) {
                                                    const hls = new Hls();
                                                    hls.loadSource(video.src);
                                                    hls.attachMedia(video);
                                                },
                                                 customFlv: function (video, player) {
                                                const flvPlayer =Flv.createPlayer({
                                                    type: 'flv',
                                                    url: video.src,
                                                });
                                                flvPlayer.attachMediaElement(video);
                                                flvPlayer.load();
                                            },
                                            },
                                        },
                                        subtitle: {
                                            url: 'http://192.168.7.251:18000/hls/13063700002000004021_0629005019/13063700002000004021_0629005019_live.m3u8',
                                            type: 'hls',
                                        },
                                    });
                            })
                           
                        } else if (item.names === "巡检人员") {
                            item.dayNumber = 0 // 日识别量
                            item.monthNumber = 3 // 月识别量

                            userInfo(item.userId).then(res => {
                                // console.log(res.data)
                                //res.data.sex = res.data.sex === "1" ? '男' : '女'
                                let html =
                                    '<div class="markerWindow">' +
                                    '<div class="title">' +
                                    '<img src="' + item.imgurl + '" alt="">' +
                                    '<p>' + item.name + '</p>' +
                                    "<span onclick='clearWindowInfo()'>X</span>" +
                                    '</div>' +
                                    '<div class="content">' +
                                    '<div class="table">' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.dayNumber + '</span>次</p>' +
                                    '<p>今日手持设备告警次数</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '<div class="item">' +
                                    '<p> <span style="font-family:PMZD" >' + item.monthNumber + '</span>次</p>' +
                                    '<p>手持设备告警次数</p>' +
                                    '<span class="border-i top-left"></span>' +
                                    '<span class="border-i top-right"></span>' +
                                    '<span class="border-i bottom-left"></span>' +
                                    '<span class="border-i bottom-right"></span>' +
                                    '</div>' +
                                    '</div>' +
                                    '<div style="display: flex;justify-content: space-between;width: 100%;height: 128px;">' +
                                    '<div style="width: 108px;height:128px;">' +
                                    '<img src="" alt="">' +
                                    '</div>' +
                                    '<div>' +
                                    '<p>位置：<span>北门西路</span></p>' +
                                    '<p>姓名：<span>' + res.data.name + '</span></p>' +
                                    '<p>性别：<span>' + res.data.sex + '</span></p>' +
                                    '<p>年龄：<span>' + res.data.age + '岁</span></p>' +
                                    '<p>部门：<span>安防部门</span></p>' +
                                    '<p>电话：<span>' + res.data.phone + '</span></p>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>';
                                _this.openWindow(item, marker, html)
                            })
                        }
                        // console.log(item.name)
                        // _this.openWindow(item, marker)
                    })
                })
            },
            /*
            * 打开弹窗事件
            * */
            openWindow(item, marker, html) {
                const infoWindow = new AMap.InfoWindow({
                    isCustom: true,  //使用自定义窗体
                    content: html, //使用默认信息窗体框样式，显示信息内容
                    offset: new AMap.Pixel(-10, -30),
                    anchor: "top-left"
                });
                this.infoWindowOpen = infoWindow
                infoWindow.open(this.map, marker.getPosition());
                window.clearWindowInfo = function () {
                    infoWindow.close()
                }
            }
        },
        beforeDestroy() {
            this.map.remove(this.markerArrList)
            if (this.infoWindowOpen !== null) {
                this.infoWindowOpen.close()
            }
        }
    }
</script>

<style scoped lang="scss">
</style>